<template>
    <div class="body shopdetailclass" v-if="JSON.stringify(shopInfo) != '{}'">
        <!-- navtab -->
        <div class="j_shop_detail_nav">
            <span :class="{ sxp: navChange == 0 }" @click="navChangefn(0)"
                >商品</span
            >
            <span
                :class="{ sxp: navChange == 1 || navChange == 3 }"
                @click="navChangefn(1)"
                >详情</span
            >
            <span :class="{ sxp: navChange == 2 }" @click="navChangefn(2)"
                >评论</span
            >
        </div>

        <!-- 商品 -->
        <div v-if="navChange == 0">
            <div class="shopdetail">
                <!-- 轮播 -->
                <div class="j_swiper">
                    <div class="swiper-container swiper2" v-if="isSwiper">
                        <div class="swiper-wrapper">
                            <div
                                class="swiper-slide"
                                v-for="(item, index) in shopInfo.goods
                                    .goods_images"
                                :key="index"
                            >
                                <img :src="item.image_url" alt="" />
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>

            <ShopInfo :goodsinfo="shopInfo.goods" @navChangefn="navChangefn(2)" />

            <ShopShare :recommend_goods="shopInfo.recommend_goods" />
        </div>

        <!-- 详情 -->
        <div v-if="navChange == 1 || navChange == 3">
            <!-- 详情中的导航 -->
            <div class="spxq-ggcs gizle sabit">
                <ul>
                    <li
                        :class="{ red: navChange == 1 }"
                        @click="navChangefn(1)"
                    >
                        商品详情
                    </li>
                    <li
                        :class="{ red: navChange == 3 }"
                        @click="navChangefn(3)"
                    >
                        规格参数
                    </li>
                </ul>
            </div>
            <!-- 详情富文本 -->
            <div v-if="navChange == 1">
                <div
                    class="goods_content"
                    v-html="shopInfo.goods.goods_content"
                ></div>
            </div>
            <!-- 详情规格参数 -->
            <div v-if="navChange == 3" class="sg" style="display: block">
                <div class="spxq p">
                    <table
                        class="de_table"
                        border="1"
                        bordercolor="#cbcbcb"
                        style="border-collapse: collapse"
                    >
                        <tbody>
                            <tr>
                                <th colspan="2">主体</th>
                            </tr>
                            <tr
                                v-for="(item, index) in canshuData"
                                :key="index"
                            >
                                <td>{{ item.goods_attribute }}</td>
                                <td>{{ item.attr_value }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 评论 -->
        <Discuss :disType="0" v-if="navChange == 2" />

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import Swiper, { Autoplay, Pagination } from 'swiper';
Swiper.use([Autoplay, Pagination]);
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.less';
// import { Toast } from 'vant';

import ShopInfo from '../../components/shop/ShopInfo';
import ShopShare from '../../components/shop/ShopShare';
import Discuss from '../../components/shop/Discuss';
export default {
    name: '',
    components: {
        ShopInfo,
        ShopShare,
        Discuss,
    },
    data() {
        return {
            isSwiper: false,
            shopInfo: {},

            navChange: 0, // 导航切换
            canshuData: [], //加工后的规格参数数据
        };
    },
    computed: {},
    mounted() {
        this.getShopdata();
    },
    methods: {
        // 切换navChangefn
        navChangefn(id) {
            this.navChange = id;
        },
        // 初始化swiper
        initSeiper() {
            new Swiper('.swiper2', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 300000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        // console.log('按钮显示了');
                    },
                },
            });
        },
        // 获取首页数据
        getShopdata() {
            axiosPost(
                '/api/goods/info',
                {
                    goods_id: this.$route.query.id,
                },
                (res) => {
                    // console.log(JSON.parse(JSON.stringify(res.data)));
                    this.shopInfo = res.data;

                    // 初始化swiper
                    this.isSwiper = true;
                    this.$nextTick(() => {
                        this.initSeiper();
                    });

                    // 获取参数详情
                    this.getCanshu();

                    // 商品详情富文本初始化
                    this.shopInfo.goods.goods_content = this.replaceText(
                        res.data.goods.goods_content
                    );
                }
            );
        },
        // 获取规格参数
        getCanshu() {
            axiosPost(
                '/api/goods/attribute',
                {
                    goods_id: this.$route.query.id,
                },
                (res) => {
                    // console.log(JSON.parse(JSON.stringify(res.data)));
                    // 加工规格参数数据
                    res.data.goods_attr_list.forEach((item) => {
                        item.goods_attribute =
                            res.data.goods_attribute[item.attr_id];
                        this.canshuData.push(item);
                    });
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.shopdetailclass {
    .shopdetail {
        overflow: hidden;
        background: #f0f1f2;

        .j_swiper {
            height: 16rem;
            overflow: hidden;
            border-radius: 0.4267rem;
            background: #fff;

            img {
                width: 16rem;
            }

            .swiper-pagination-bullet {
                width: 0.256rem;
                height: 0.256rem;
                display: inline-block;
                border-radius: 50%;
                background: #000;
                opacity: 0.2;
            }
            .swiper-pagination-bullet-active {
                opacity: 1;
                background: #fff;
            }
        }
    }

    .goods_content {
        img {
            max-width: 16rem;
        }
        p {
            img {
                width: 16rem;
            }
        }
    }

    .podee {
        height: auto;
    }

    .podee .cart-concert-btm .fl ul li a span {
        z-index: 99;
        background: #fff;
    }

    .j_shop_detail_nav {
        height: 2.0907rem;
        width: 11.8rem;
        position: fixed;
        left: 2.0907rem;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999999;

        span {
            font-size: 0.725rem;
            font-weight: 500 !important;
            color: #333333;
            font-weight: 500;
            height: 2.0907rem;
            line-height: 2.0907rem;
            padding: 0 0.8rem;
            margin: 0 0.26667rem;
        }
    }

    body .j_shop_detail_nav .sxp {
        border-bottom: 2px solid #ec5151;
        color: #ec5151;
        font-weight: 600;
    }
}
</style>
